<template>
    <div>
        <!-- 底部固定栏目 -->
        <div class="bottom-tabbar-bg"></div>
        <div class="bottom-tabbar">
            <div class="tabbar-wrapper">
                <router-link to="/hsindex" tag="div" class="item">
                    <div class="item-pic">
                        <span class="icon iconfont icon-homepage_fill"></span>
                    </div>
                    <div class="item-text">主页</div>
                </router-link>
                <router-link :to="'/hschoice'" tag="div" class="item">
                    <div class="item-pic">
                        <span class="icon iconfont icon-huishou"></span>
                    </div>
                    <div class="item-text">手机回收</div>
                </router-link>
                <router-link to="/hsqlogin" tag="div" class="item">
                    <div class="item-pic">
                        <span class="icon iconfont icon-people_fill"></span>
                    </div>
                    <div class="item-text">我的</div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: {

    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    
    //底部固定栏
    .bottom-tabbar-bg{
        display:inline-block;
        content:'';
        width:44px;
        height:44px;
        background:#fff;
        position:fixed;
        bottom:20px;
        left:50%;
        z-index:89;
        border-radius:50%;
        box-shadow: @box-shadow;
        transform:translateX(-50%);
    }
    .bottom-tabbar{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:50px;
        z-index:90;
        box-shadow: @box-shadow;
        background:#fff;
        .tabbar-wrapper{
            display:flex;
            height:100%;
            .item{
                flex:1;
                text-align:center;
                color:#666;
                position:relative;
                .item-pic{
                    display:inline-block;
                    height:25px;
                    width:25px;
                    line-height:25px;
                    position:absolute;
                    bottom:20px;
                    left:50%;
                    text-align:center;
                    transform:translateX(-50%);
                    span{
                        font-size:25px;
                        color:@color-alert-gray;
                    }
                }
                .item-text{
                    position:absolute;
                    bottom:0;
                    left:0;
                    width:100%;
                    font-size:10px;
                    color:#8b8b8b;
                    height:15px;
                }
                &:nth-child(1){
                    .item-pic{
                        span{
                            font-size:27px;
                        }
                    }
                }
                &:nth-child(3){
                    .item-pic{
                        span{
                            font-size:27px;
                        }
                    }
                }
                &:nth-child(2){
                    .item-pic{
                        height:44px;
                        width:44px;
                        line-height:44px;
                        box-sizing:border-box;
                        background:#fff;
                        border-radius:50%;
                        padding:5px;
                        background: -webkit-linear-gradient(#79e4ea, #44bbe5);  
                        background: -o-linear-gradient(#79e4ea, #44bbe5);  
                        background: -moz-linear-gradient(#79e4ea, #44bbe5);  
                        background: -mos-linear-gradient(#79e4ea, #44bbe5);  
                        background: linear-gradient(#79e4ea, #44bbe5);  
                        span{
                            display:inline-block;
                            height:34px;
                            width:34px;
                            line-height:34px;
                            font-size:28px;
                            border-radius:50%;
                            color:#fff;
                        }
                    }
                }
                //链接样式
                &.router-link-active{
                    .item-pic{
                        span{
                            color:@color-yellow;
                        }
                    }
                }
            }
        }
    }
</style>
